<template>
  <div id="jiaoliu">
      <div class="bt">&nbsp;/&nbsp;所有&nbsp;› &nbsp;商户交流</div>
      <div class="area">

          <div class="jiaoliu" v-for="(item,index) in service">
              <div class="bt">
                <div class="text">{{ item.title }}<span style="display: none;">{{ test[0] }}</span></div>
                <a href="javascript:;" @click="listdown(index)"><div class="icon" ><i :class="jiaoliuicon[index]" style="font-size: 30px;line-height: 40px" ></i>&nbsp;&nbsp;</div></a>
              </div>
              <transition name="fade" mode="out-in">
              <div class="nr" v-if="nrshow[index]">
                  <div class="block" v-for="(lis,flag) in item.context">
                      <div class="icon"><a :href="lis.url"><i :class="lis.icon"></i></a></div>
                      <div class="text">
                          <p class="p1"><a href="lis.url">{{ lis.bt }}</a></p>
                          <p class="p2">{{ lis.question }}</p>
                          <p class="p3">主题: {{ lis.zt }}, 帖数: {{ lis.num }}</p>
                      </div>
                  </div>
                  <div style="clear:left;width: 100%;"></div>
              </div>
              </transition>
          </div>

      </div>
   </div>
</template>

<script>
export default {
  data () { 
    return {
      nrshow:[true,true,true,true,true,true],
      jiaoliuicon:['fa fa-angle-down','fa fa-angle-down','fa fa-angle-down','fa fa-angle-down','fa fa-angle-down'],
      test:[],
      service:[
        {
          title:'商户交流',
          context:[
            {
              icon:'fa fa-university',
              bt:'运营杂谈',
              question:'我们期待，不同的观点在此碰撞',
              zt:'3696',
              num:'13万',
              url:'./service/6.html'
            },
            {
              icon:'fa fa-university',
              bt:'资源下载',
              question:'提供运营方案、行业报告等网络资源下载',
              zt:'19',
              num:'1850',
              url:'./service/7.html'
            },
            {
              icon:'fa fa-university',
              bt:'开发者交流',
              question:'私密版块',
              zt:'1万',
              num:'6万',
              url:'./service/8.html'
            },
            {
              icon:'fa fa-university',
              bt:'有赞商盟',
              question:'私密版块',
              zt:'3万',
              num:'1万',
              url:'./service/9.html'
            },
            {
              icon:'fa fa-university',
              bt:'聊天专版 ',
              question:'为您解决店铺认证、店铺资料修改、管理员更替等使用问题',
              zt:'8750',
              num:'3万',
              url:'./service/10.html'
            }
          ]
        }]
    }
  },
  components: {

  },
  methods: {
    listdown(index){
       if(this.nrshow[index]  == true){
          this.jiaoliuicon[index] = 'fa fa-angle-up';
          this.nrshow[index] =false;
          this.test='';
       }else{
          this.jiaoliuicon[index] = 'fa fa-angle-down';
          this.nrshow[index] = true;
          this.test='11';
       }
    }
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter, .fade-leave-active {
    opacity: 0;
}
#jiaoliu{
  width:1000px;
  margin:0 auto;
}

.bt{
   width: 100%;
  height: 25px;
  font:13px/25px '微软雅黑';
}
.area{
  width: 100%;
}
.area .jiaoliu{
  width: 100%;
  margin-bottom: 20px;
}
.area .jiaoliu .bt{
  height: 40px;
  background-color:#fff;
  color:#000;
  padding:0 2%;
  width: 96%;
  border-bottom: 1px solid #eee;
}
.area .jiaoliu .bt .text{
  color:#000;
  font:bold 15px/40px '微软雅黑';
  float: left;
}
.area .jiaoliu .bt .icon{
  float: right;
}
.area .jiaoliu .nr{
  padding:20px 3%;
  width: 94%;
  background-color:#fff;
}
.area .jiaoliu .nr .block{
  width: 50%;
  height: 100px;
  float: left;
}
.area .jiaoliu .nr .block .icon{
  height:100%;
  width: 17%;
  text-align: center;
  float: left;
}
.area .jiaoliu .nr .block .text{
  width:83%;
  height: 100%;
  float: right;
}
.area .jiaoliu .nr .block .text .p1 a{
  font:20px/35px '微软雅黑';
  color:#FE5050;
}
.area .jiaoliu .nr .block .text .p2 {
  font:12px/20px '微软雅黑';
  color:#666;
}
.area .jiaoliu .nr .block .text .p3{
  font:12px/20px '微软雅黑';
  color:#999;
}
.area .jiaoliu .nr .block .icon i{
  color:#FE5050;
  line-height: 90px;
  font-size: 40px;
}
</style>
